import React, { useState, useEffect } from 'react'
import { Card, Table, Button, Input, message, Modal, Form, Tag } from 'antd'
import { PageHeaderWrapper } from "@ant-design/pro-layout";
import { ExclamationCircleOutlined } from '@ant-design/icons'

import request from '@/utils/request'
import Save from './save'
const { confirm } = Modal

export default () => {
    const [selectedKeys, setSelectedKeys] = useState([]);
    const [tableData, setTableData] = useState({ list: [], total: 0 })
    const [id, setId] = useState(0)
    const [visable, setVisable] = useState(false)
    const [form] = Form.useForm()

    const rowSelection = {
        selectedRowKeys: selectedKeys,
        onChange: (selectedRowKeys: any) => {
            setSelectedKeys(selectedRowKeys)
        },
    };
    const columns: any = [
        {
            title: '标签名称',
            dataIndex: 'title',
            render: (text: any) => <Input value={text} style={{ width: "280px" }} />,
        },
        {
            title: '图片',
            dataIndex: 'logo',
            render: (text: any) => <img src={text} style={{ width: "62px" }} />,
            align: "center",
        },
        {
            title: '排序',
            width: "80px",
            dataIndex: 'sort',
            align: "center",
            render: (text: any) => <Tag color="green">{text}</Tag>
        },
        {
            title: '操作',
            width: "200px",
            align: "center",
            render: (text: any, record: any) => (
                <>
                    <Button size="small" type="primary" ghost style={{ marginRight: "10px" }} onClick={() => {
                        setVisable(true)
                        setId(record.id)
                        request(`/goods/tag/${record.id}`).then((result) => {
                            const data = result.data;
                            data.upload = [];
                            if (data.logo) {
                                data.upload = [{
                                    uid: new Date().getTime(),
                                    name: data.logo.substr(-15, 15),
                                    url: data.logo
                                }];
                            }
                            form.setFieldsValue(data)
                        })
                    }}>修改</Button>
                    <Button size="small" danger onClick={() => {
                        destroy([record.id])
                    }}>删除</Button>
                </>
            ),
        },
    ];

    const ToolBtn = () => {
        return (
            <div>
                <Button type="primary" danger onClick={() => {
                    const tableIds = tableData.list.map((item: any) => item.id)
                    let selectIds: [] = [];
                    selectedKeys.forEach((item) => {
                        if (tableIds.includes(item)) {
                            selectIds.push(item)
                        }
                    })

                    if (selectIds.length < 1) {
                        message.warn("请选择你要操作的选项")
                        return
                    }
                    destroy(selectIds)
                }} style={{ marginRight: "6px" }}>批量删除</Button>

                <Button type="primary" ghost onClick={() => {
                    form.resetFields()
                    setId(0)
                    setVisable(true)
                }}>新增标签</Button>
            </div>
        );
    }

    const getList = (params = {}) => {
        request(`/goods/tag-list`, { params }).then((result) => {
            const { list, total } = result.data
            setTableData({ list, total })
        })
    }


    const destroy = (ids: any[]) => {
        confirm({
            title: 'Do you Want to delete these items?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                request(`/goods/tag-destroy`, {
                    method: "Delete",
                    params: { ids },
                }).then((result) => {
                    message.success("删除成功")
                    getList()
                })
            }
        });
    }

    useEffect(() => {
        getList()
    }, [])

    const tableChange = (pagination: any, filters: any, sorter: any, extra: any) => {
        const params = { page: pagination.current };
        getList(params)
    }
    return (
        <PageHeaderWrapper title={false}>
            <Card title={<ToolBtn />}>
                <Table rowKey="id" columns={columns}
                    dataSource={tableData.list} rowSelection={rowSelection}
                    onChange={tableChange}
                />
                <Modal
                    title={id > 0 ? "修改" : "添加"}
                    visible={visable}
                    onOk={() => {
                        form.submit();
                    }}
                    onCancel={() => {
                        setVisable(false)
                    }}
                    getContainer={false}
                >
                    <Save form={form} getList={getList} close={() => {
                        setVisable(false)
                    }} id={id} />
                </Modal>
            </Card>
        </PageHeaderWrapper >
    );
}